<template>
  <div class="flex border border-solid border-black p-[10px]">
    <!-- 承运商 -->
    <div class="border border-solid border-black p-[20px] mr-[20px] w-[50%]">
      <FormItem label="承运商" name="carrierMid">
        <Select v-model:value="formState.carrierMid" @change="selectCarrier">
          <SelectOption
            placeholder="请选择承运商"
            v-for="item in carrierList"
            :key="item.mid"
            :value="item.mid"
            >{{ item.companyName }}</SelectOption
          >
        </Select>
      </FormItem>

      <FormItem label="计划送达时间" required name="deliveryTime">
        <DatePicker
          v-model:value="formState.deliveryTime"
          value-format="YYYY-MM-DD"
          :disabled-date="disabledDate"
          placeholder="请选择日期"
          style="width: 100%"
        />
      </FormItem>

      <FormItem label="运输要求">
        <Textarea v-model:value="formState.deliveryRemark" showCount :maxlength="100" :rows="5" />
      </FormItem>

      <FormItem label="运输方式">
        <Select v-model:value="formState.carrierType">
          <SelectOption
            placeholder="请选择运输方式"
            v-for="item in carrierTypeList"
            :key="item.itemKey"
            :value="item.itemKey"
            >{{ item.itemValue }}</SelectOption
          >
        </Select>
      </FormItem>

      <FormItem label="计费方式">
        <Select v-model:value="formState.freightTypeId">
          <SelectOption
            placeholder="请选择计费方式"
            v-for="item in freightTypeList"
            :key="item.itemKey"
            :value="item.itemKey"
            >{{ item.itemValue }}</SelectOption
          >
        </Select>
      </FormItem>
    </div>
    <!-- 仓库 -->
    <div class="border border-solid border-black p-[20px] w-[50%]">
      <WareHouse :queryParams="props.queryParams" />

      <!-- <FormItem v-if="formState.shippingType !== 5" label="上传随车文件">
        <BasicUploadDragger :params="params" :fileLists="fileList" />
      </FormItem> -->
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  // import BasicUploadDragger from '@/components/UploadDragger/BasicUploadDragger.vue';
  import { getCarrierByMap } from '@/api/deliveryOrder';
  import { getByGroupCode } from '@/api/pubInfo/index';
  import { FormItem, Select, SelectOption, DatePicker, Textarea } from 'ant-design-vue';
  import type { Carrier, GroupCode } from './types/types';
  import WareHouse from './WareHouse.vue';

  const props = defineProps({
    queryParams: { type: Object },
  });

  onMounted(async () => {
    formState.value = props.queryParams as any;
    // 承运商
    const carrierRes = await getCarrierByMap({ status: 1 });
    carrierList.value = carrierRes.records;

    // 运输方式
    const carrierTypeRes = await getByGroupCode('tps_carrier_type');
    carrierTypeList.value = carrierTypeRes as any;

    // 计费方式
    const freightTypeRes = await getByGroupCode('tps_billing');
    freightTypeList.value = freightTypeRes as any;

    console.log('🚀 ~ onMounted ~ formState.value:', props.queryParams.batchId);
  });

  // const formRef = ref();

  // 承运商list
  const carrierList = ref<Carrier[]>([]);
  // 运输方式list
  const carrierTypeList = ref<GroupCode[]>([]);
  // 计费方式list
  const freightTypeList = ref<GroupCode[]>([]);

  const formState = ref({
    shippingType: 1,
    carrierMid: '', //承运商id
    carrierName: '', // 承运商名称
    deliveryTime: undefined, //计划送达时间
    deliveryRemark: '', //运输要求
    carrierType: '3', //运输方式
    freightTypeId: '1', //计费方式

    consigneeWarehouseId: '', // 仓库id
    consigneeWarehouse: '', //出库仓名称
    warehouseRemark: '', // 出库要求
    isUrgant: 0, //是否加急
    isDelivery: 1, // 是否生成送货单
    isPrintDelivery: 1, // 是否打印送货单
    batchId: '',
  });

  // const params = reactive({
  //   configCode: 'eslogis_order',
  //   label: '3', // 1-新增派单 2-派单报价 3-派单调度 4-报价复核
  //   batchId: props.queryParams!.batchId,
  // });
  // const fileList = reactive([]);

  const selectCarrier = (e) => {
    carrierList.value.forEach((element) => {
      if (element.mid === e) {
        formState.value.carrierName = element.companyName;
      }
    });
  };

  const disabledDate = (current) => {
    return current && new Date(current).getTime() <= new Date().getTime() - 24 * 60 * 60 * 1000;
  };
</script>
